<template>
  <div id="wrapper">
    <el-card class="box-card">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">基础数据</el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
      </el-row>
      <ConfigDialog :filterData="filterData" :loading="loading" @changeConfig="configChange"></ConfigDialog>
    </el-card>
  </div>
</template>
<script>
import { getHeaderName } from '@/app.config'
import http from '@/views/sys/axios'
import { mapState, mapMutations } from 'vuex'
import projectForm from './components/form.vue';
import shareDialog from './components/shareDialog.vue'
import configDialog from './components/configDialog.vue'
import { param } from '../../utils';

export default {
  components: {
    projectform: projectForm,
    ShareDialog: shareDialog,
    ConfigDialog: configDialog,
  },
  data() {
    return {
      filterData:{},
      BACKEND_API: process.env.VUE_APP_SOURSE_MANAGE_HOST,
      dialogVisible: false,
      dialogEditVisible: false,
      shareVisible: false,
      tableData: [],
      tableTotal: 15,
      itemFormData:{},
      calculated:{},
      childData: [],
      expands: [],
      week_col: [],
      params: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      statusList: [],
      shareId: ''
    }
  },
  created() {
    this.getFilter()
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    getFilter() {
      this.loading = true
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/filter',
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.loading = false
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
        if(res.data.code == 200 && res.data.status != 403) {
          this.filterData = res.data.data
        }
        
      })
    },
    configChange() {
      this.getFilter()
    },
    changeFilter(value) {
      this.params.pageNo = 1
      this.getPorjectList()
      
    },
  }
}

</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

/deep/ .el-table th.gutter {
  display: table-cell !important;
}

/deep/ .el-dialog {
  min-height: 400px;
}

/deep/ .el-dialog__body {
  border-top: 1px solid #b2b2b2;
}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}
/deep/ .el-table td.cell-grey { 
  background-color:#909399 !important;
  color: #fff;
}
/deep/ .el-table td.cell-red { 
  background-color:#ff4949 !important;
  color: #fff;
}
/deep/ .el-table td.cell-yellow { 
  background-color:#ffba00 !important;
  color: #fff;
}
/deep/ .el-table td.cell-green { 
  background-color:#13ce66 !important;
  color: #fff;
}
/deep/ .el-table .cell {
  white-space: pre-line;
}
.hover-div {
  cursor: pointer;
}
.borders{
  border-bottom: 1px solid #dfe6ec;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .newReport {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marT {
  margin-top: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
